<template>
    <Form :model="formDynamic">
        <div>
            <span style="position: absolute">{{KeyName}}:</span>
            <Card style="margin-left:130px; margin-bottom: 15px;" class="jsonConfigObjectCard">
                <div>
                    <Row>
                        <Button type="dashed" @click="handleAdd" icon="md-add">添加扩展配置</Button>
                        <Button type="dashed" style="margin-left: 10px" @click="handleRemoveAll()" icon="md-remove">
                            清空配置
                        </Button>
                    </Row>
                </div>
                <div>
                    <FormItem
                            prop="ext_config"
                            v-for="(item, index) in formDynamic.items"
                            v-if="item.status"
                            style="margin-bottom: 2px"
                    >
                        <Row style="margin-top: 2px; border: 1px solid #c3d4e4; padding-bottom: 2px">
                            <JsonEditor
                                    :options="{
                                        confirmText: '确认',
                                        cancelText: '取消',
                                    }"
                                    :objData="item.value"
                                    v-model="item.value" >
                            </JsonEditor>
                            <Button style="margin-left: 10px" @click="handleRemove(index)">删除</Button>
                        </Row>
                    </FormItem>
                </div>
            </Card>
        </div>
    </Form>

</template>
<script>
    export default {
        name: 'jsonConfigObject',
        data() {
            return {
                index: 0,
                formDynamic: {items: []},
            }
        },
        props: {
            KeyName: {
                type: String,
                default: null
            },
            jsonData: {
                type: Array,
                default: null
            }
        },
        watch: {},
        methods: {
            handleAdd() { //添加项
                this.index++;
                this.formDynamic.items.push({
                    value: {},
                    status: 1
                });
            },
            handleRemove(index) { //删除项
                this.index--;
                this.formDynamic.items[index].status = 0;
            },
            handleRemoveAll() { //删除所有项
                this.index = 0;
                this.formDynamic.items = [];
            },
            handleCreateObject() { //返回有效的数据
                let data = [];
                for (let item of this.formDynamic.items) {
                    if (item.status === 1 && !(JSON.stringify(item.value) === "{}")) {
                        data.push(item.value)
                    }
                }
                return data;
            }
        },
        created() {
            if (this.jsonData.length > 0) {
                for (let value of this.jsonData) {
                    this.index++;
                    this.formDynamic.items.push({
                        value: value,
                        status: 1
                    })
                }
            }
        }
    }
</script>
<style>
</style>